<template>
  <div class="course-doc-container">

    <div class="box">

      <div style="display:flex" v-for="(obj,i) in courseDocList" :key="obj.courseDocId">

        <div style="width:30%">
          <Input type="text"
                 clearable
                 maxlength="40"
                 show-word-limit
                 v-model="obj.courseDocName"
                 placeholder="请输入文档名称">
            <Icon type="ios-pricetags-outline" slot="prepend"></Icon>
          </Input>
        </div>

        <div style="width:50%;margin-left: 1%">
          <Input type="text"
                 clearable
                 maxlength="300"
                 v-model="obj.courseDocUrl"
                 show-word-limit
                 placeholder="请输入文档链接">
            <Icon type="ios-share-alt-outline" slot="prepend"></Icon>
          </Input>
        </div>

        <!--跳转-->
        <div style="margin-left: 1%">
          <Button type="primary" @click="goDocUrl(obj)">跳转</Button>
        </div>
        <!--删减号-->
        <div style="margin-left: 1%" @click="delCourseDoc(obj)">
          <IconAli :sty="{width:'30px',height:'30px',cursor:'pointer'}" icon='sub'></IconAli>
        </div>

      </div>
      <div style="display: flex;margin-top: 10px">
        <!--保存资料-->
        <div @click="saveCourseDoc">
          <IconAli :sty="{width:'39px',height:'39px',marginTop:'-2px',cursor:'pointer'}" icon='ok_s'
                   v-if="saveCourseDocFlag"></IconAli>
        </div>
        <div>
          <IconAli :sty="{width:'39px',height:'39px',marginTop:'-2px',cursor:'pointer'}" icon='ok_s_grey'
                   v-if="!saveCourseDocFlag"></IconAli>
        </div>

        <!--添加课程-->
        <div @click="addCourseDoc()">
          <IconAli :sty="{width:'36px',height:'36px',marginLeft: '3px',cursor:'pointer'}" icon='add'></IconAli>
        </div>

        <!--文档排序-->
        <div @click="orderCourseDoc()">
          <IconAli :sty="{width:'45px',height:'45px',marginTop:'-3px',marginLeft:'3px',cursor:'pointer'}"
                   icon='order-1'></IconAli>
        </div>
      </div>
    </div>


    <!--文档排序-->
    <Modal
        v-model="orderCourseDocFlag"
        title="请排序"
        :mask-closable="false"
        draggable
        sticky
        width="800px"
        @on-ok="orderCourseDocOk">

      <Order :dataList="courseDocOrderList" @my-event-order-list="getOrderCourseDocList"></Order>

    </Modal>
  </div>
</template>

<script>
import IconAli from "@/views/common/IconAli";
import Order from "@/views/common/Order"

export default {
  //组件名称
  name: "CourseDoc",
  props: ["courseDetailId"],
  //组件注册
  components: {
    IconAli,Order
  },
  //数据驱动
  data() {
    return {
      courseDocList: [], //课程资料列表,

      saveCourseDocFlag: true,    //保存
      orderCourseDocFlag: false,   //文档排序

      courseDocOrderList: [],      //文档列表
      courseDocOrderIdList: [],      //文档Id列表
    }
  },
  //计算属性
  computed: {},
  //数据监听
  watch: {},
  //方法
  methods: {
    //添加文档
    addCourseDoc() {
      let tmpCourseDoc = {
        courseDocName: "",
        courseDocUrl: "",
      }
      this.courseDocList.push(tmpCourseDoc)
    },
    //保存文档
    saveCourseDoc() {
      this.saveCourseDocFlag = false
      let data = this.courseDocList
      this.axios.post(`/course/course-doc/${this.courseDetailId}`, data)
          .then((data) => {
            this.saveCourseDocFlag = true  //保存开关
            this.selectCourseDocListByCourseDetailId()  //请求文档列表
            this.$Message.success('文档保存成功!');
          })
    },
    //跳转文档链接
    goDocUrl(obj) {
      window.open(obj.courseDocUrl, '_blank');
    },
    //删除文档
    delCourseDoc(obj) {
      this.axios.delete(`/course/course-doc/${obj.courseDocId}`)
          .then((data) => {
            this.selectCourseDocListByCourseDetailId()  //请求文档列表
            this.$Message.success('文档删除成功!');
          })
    },
    //文档排序
    orderCourseDoc() {
      this.courseDocOrderList.length = 0;
      this.orderCourseDocFlag = true

      for (let i = 0; i < this.courseDocList.length; i++) {
        let obj = this.courseDocList[i];
        let tmp = {
          id: obj.courseDocId,
          title: obj.courseDocName
        }
        this.courseDocOrderList.push(tmp);
      }
    },
    getOrderCourseDocList(data) {
      this.courseDocOrderIdList = data.idList;
    },
    //排序提交
    orderCourseDocOk() {
      let data = this.courseDocOrderIdList
      this.axios.put('/course/course-doc/order', data)
          .then((data) => {
            this.selectCourseDocListByCourseDetailId()  //请求文档列表
            this.$Message.success('文档排序成功!');
          })
    },
    //根据课程id查询课程文档列表
    selectCourseDocListByCourseDetailId() {
      this.axios.get(`/course/course-doc/${this.courseDetailId}`)
          .then((data) => {
            this.courseDocList = data.data
          })
    }
  },
  //钩子函数
  mounted() {
    this.selectCourseDocListByCourseDetailId();
  }
}
</script>

<style lang="less" scoped>
.course-doc-container {

}
</style>